<template>
    <div class="content">
        <!--头部-->
        <div class="header-setting">
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../main">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>系统设置</a-breadcrumb-item>
                <a-breadcrumb-item>活动规则设定</a-breadcrumb-item>
            </a-breadcrumb>
            <!--查询条件-->
            <div class="box-condition-body">
                <!--                <div class="box-condition-item" style="padding-top: 20px;">
                                    <div style="margin: 0 50px">时间</div>
                                    <template>
                                        <div class="button_time">
                                            <a-button type="primary" @click="button_time(0)" :style="computedStyle(0)">今天</a-button>
                                            <a-button type="primary" @click="button_time(1)" :style="computedStyle(1)">昨天</a-button>
                                            <a-button type="primary" @click="button_time(2)" :style="computedStyle(2)">本周</a-button>
                                            <a-button type="primary" @click="button_time(3)" :style="computedStyle(3)">上周</a-button>
                                            <a-button type="primary" @click="button_time(4)" :style="computedStyle(4)">本月</a-button>
                                        </div>
                                    </template>
                                    <template>
                                        <div style="margin: auto 50px">
                                            <a-range-picker
                                                    id="range-picker"
                                                    :showTime="{
                                                        format: 'HH:mm:ss'
                                                    }"
                                                    format="YYYY-MM-DD HH:mm"
                                                    :placeholder="['开始时间', '结束时间']"
                                                    @ok="onOk"
                                                    @change="onChange"
                                                    :value="rangePickerValue()"/>
                                        </div>
                                    </template>
                                </div>-->
                <div class="box-condition-item" style="padding-top: 20px;">
                    <div style="display: flex; justify-content: space-between;align-items: center">
                        <div style="margin: 0 15px  0 50px">规则名称</div>
                        <template>
                            <a-input-search
                                    placeholder="规则名称" style="width: 200px"
                                    @change="() => this.queryData()" v-model="searchName"/>
                        </template>
                    </div>
                    <div style="display: flex; justify-content: space-between;align-items: center">
                        <div style="margin: 0 15px  0 50px">规则状态</div>
                        <template>
                            <a-select
                                    showSearch
                                    placeholder="规则状态"
                                    optionFilterProp="children"
                                    style="width: 200px"
                                    :allowClear="allowClear"
                                    @select="selectIsValidType"
                                    @change="selectIsValidTypeChange">
                                <a-select-option v-for="p in isValidOption" :key="p.value" :value="p.value">{{p.label}}
                                </a-select-option>
                            </a-select>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        <!--表单-->
        <div class="box-form">
            <!--工具栏-->
            <div class="box-tool">
                <div></div>
                <div style="display: flex">
                    <a-button type="primary" @click="addTap()">添加活动规则</a-button>
                    <a-button type="primary" icon="rollback" @click="rollbackClick">返回活动</a-button>
                </div>
            </div>

            <!--数据表格-->
            <div class="box-table">
                <a-table :columns="columns"
                         rowKey="id"
                         :dataSource="dataSource"
                         :pagination="pagination"
                         bordered size="small"
                         :scroll="scroll"
                         :customRow="customRow"
                         :rowClassName="setRowClassName"
                         @change="tableChange">
                    <template slot="applicableConditions" slot-scope="text">
                        <template v-if="text == 0">
                            无
                        </template>
                        <template v-else>
                            账户无欠费
                        </template>
                    </template>
                    <template slot="rechargePriceSlot" slot-scope="text">
                        <div>{{text==undefined||text==''?0:text/100}}</div>
                    </template>
                    <template slot="rechargeGiftPriceSlot" slot-scope="text">
                        <div>{{text==undefined||text==''?0:text/100}}</div>
                    </template>
                    <template slot="ruleType" slot-scope="text">
                        <template v-if="text == 0">
                            默认
                        </template>
                        <template v-else>
                            其它
                        </template>
                    </template>
                    <template slot="isValid" slot-scope="text">
                        <template v-if="text == 1">
                            <font style="color:#00FF00"> 启用</font>
                        </template>
                        <template v-else>
                            <font style="color:#ff0000"> 禁用</font>
                        </template>
                    </template>

                    <template slot="cId" slot-scope="text">
                        <template v-if='text != null'>
                            <a-popconfirm title="确认删除？" okText="确认" cancelText="取消"
                                          @confirm="deleteOk(text)" placement="topLeft">
                                <a-button type="danger" style="margin-right: 0.05rem;">删除</a-button>
                            </a-popconfirm>

                            <a-button type="primary" @click="clickBindButton(text)">
                                绑定用户组
                            </a-button>
                        </template>
                    </template>
                </a-table>
            </div>
        </div>
        <!-- 弹窗 -->
        <a-modal
                :title="title" v-model="dispatchPopupData.visible"
                :confirmLoading="dispatchPopupData.loading"
                @cancel="() => { this.hideDispatchPopup() }" @ok="addOrUpdateActivities">
            <a-row style="margin-top:0.5em">
                <a-col :span="6">活动名称</a-col>
                <a-col :span="16">
                    <a-input style="width:70%;" placeholder="活动名称" disabled="true" v-model="activitiesName"/>
                </a-col>
            </a-row>
            <a-row style="margin-top:0.5em">
                <a-col :span="6">规则名称</a-col>
                <a-col :span="16">
                    <a-input style="width:70%;" placeholder="规则名称" v-model="ruleName"/>
                </a-col>
            </a-row>
            <a-row style="margin-top:0.5em">
                <a-col :span="6">条件选项类型</a-col>
                <a-col :span="16">
                    <a-select style="width:70%" v-model="applicableConditions" :options="applicableConditionsOption"
                              placeholder="条件选项类型"/>
                </a-col>
            </a-row>
            <a-row style="margin-top:0.5em">
                <a-col :span="6">充值满足条件（元）</a-col>
                <a-col :span="16">
                    <a-input style="width:70%;" type="number" placeholder="充值满足条件（元）" v-model="rechargePrice"/>
                </a-col>
            </a-row>
            <a-row style="margin-top:0.5em">
                <a-col :span="6">充值满足条件赠送（元）</a-col>
                <a-col :span="16">
                    <a-input style="width:70%;" type="number" placeholder="充值满足条件赠送（元）" v-model="rechargeGiftPrice"/>
                </a-col>
            </a-row>
            <a-row style="margin-top:0.5em">
                <a-col :span="6">面值单位（点券、点数）</a-col>
                <a-col :span="16">
                    <a-input style="width:70%;" placeholder="面值单位（点券、点数）" v-model="rechargeParValueUnit"/>
                </a-col>
            </a-row>

            <a-row style="margin-top:0.5em">
                <a-col :span="6">活动规则有效时间</a-col>
                <!-- @ok="onOkPop" -->
                <a-col :span="16">
                    <a-range-picker
                            id="range-picker"
                            :showTime="{
                                format: 'HH:mm:ss'
                            }"
                            format="YYYY-MM-DD HH:mm:ss"
                            :placeholder="['开始时间', '结束时间']"
                            @ok="onOkPop"
                            @change="onChangePop"
                            :value="rangePickerValuePop()"/>
                </a-col>
            </a-row>

            <a-row style="margin-top:0.5em">
                <a-col :span="6">活动规则类型</a-col>
                <a-col :span="16">
                    <a-select style="width:70%" v-model="ruleType" :options="ruleTypeOption"
                              placeholder="活动规则类型"/>
                </a-col>
            </a-row>
            <a-row style="margin-top:0.5em">
                <a-col :span="6">活动规则状态</a-col>
                <a-col :span="16">
                    <a-select style="width:30%;" v-model="isValid" :options="isValidOption"
                              placeholder="活动规则状态"/>
                </a-col>
            </a-row>

        </a-modal>

        <!--绑定用户组弹窗-->
        <a-modal
                :title="title" v-model="bindUserGroupPopupData.visible"
                :confirmLoading="bindUserGroupPopupData.loading"
                @cancel="() => { this.hideBindUserGroupPopup() }" @ok="bindActivityToUserGroup">
            <a-row style="margin-top:0.5em">
                <a-col :span="6">用户组列表</a-col>
                <a-col :span="16">
                    <a-select
                            style="margin: 0 100px 0 16px; width: 200px"
                            showSearch
                            mode="multiple"
                            placeholder="选择用户组"
                            optionFilterProp="children"
                            v-model="selectUserGroupId"
                            :allowClear="true"
                    >
                        <a-select-option v-for="p in userGroupList" :key="p.id" :value="p.id"
                        >{{ p.userGroupName }}
                        </a-select-option>
                    </a-select>
                </a-col>
            </a-row>
        </a-modal>
    </div>
</template>

<script>
    import moment from 'moment';
    // import CommonApi from '../../api/CommonApi';
    import apiMarkeingRule from '../../api/system/MarketingActivitiesRule';
    import userGroupApi from "../../api/system/UserGroup";
    // 标题行
    const columns = [
        {
            title: "序号",
            dataIndex: "no",
            width: "5%",
        },
        {
            title: "活动名称",
            dataIndex: "activitiesName",
            width: "10%",
        },
        {
            title: "活动规则名称",
            dataIndex: "ruleName",
            width: "10%",
        },
        {
            title: "适用条件",
            dataIndex: "applicableConditions",
            scopedSlots: {customRender: 'applicableConditions'},
            width: "10%",
        },
        {
            title: "充值满足条件（元）",
            dataIndex: "rechargePrice",
            scopedSlots: {customRender: 'rechargePriceSlot'},
            width: "10%",
        },
        {
            title: "充值满足条件赠送（元）",
            dataIndex: "rechargeGiftPrice",
            scopedSlots: {customRender: 'rechargeGiftPriceSlot'},
            width: "10%",
        },
        {
            title: "面值单位（点券、点数）",
            dataIndex: "rechargeParValueUnit",
            width: "10%",
        },
        {
            title: "规则类型",
            dataIndex: "ruleType",
            scopedSlots: {customRender: 'ruleType'},
            width: "8%",
        },
        {
            title: "规则起始时间",
            dataIndex: "startTime",
            width: "10%",
        },
        {
            title: "规则结束时间",
            dataIndex: "endTime",
            width: "10%",
        },
        {
            title: "状态",
            dataIndex: "isValid",
            scopedSlots: {customRender: 'isValid'},
            width: "6%",
        },
        {
            title: "创建时间",
            dataIndex: "createdTime",
            width: "10%",
        },
        {
            title: "操作",
            dataIndex: "id",
            scopedSlots: {customRender: 'cId'},
            width: "14%",
        },
    ];

    const dataSource = [];

    const queryCondition = {
        limit: "100",
        curr: "1",
        ruleName: "",
        isValid: "",
        type: "",
        timeScreenCondition: "6",
        startTimeStamp: "",
        endTimeStamp: ""
    };

    const queryBindCondition = {
        activityRuleId: '',
        adminUserGroupId: '',
        adminUserGroupIdArr: []
    };

    export default {
        name: "markeingActivitiesRule",
        data() {
            return {
                /**表格**/
                columns: columns,
                dataSource: dataSource,
                /*分页插件*/
                pagination: {
                    showTotal: total => `共${total}条`,
                    total: 0,
                    current: 1,
                    defaultCurrent: 1,
                    showQuickJumper: true,
                    defaultPageSize: 100
                },
                /*表格固定头部*/
                scroll: {
                    y: 550,
                },
                tableState: {
                    rowId: -1,
                },
                /*当前选中的行数据*/
                allowClear: true,
                currRowData: "",
                /**按钮**/
                /*时间按钮*/
                selectId: -1,
                selectIdPop: -1,
                /**日期控件**/
                /*时间日期*/
                momentArr: [],
                momentArrPop: [],
                /**文本框**/
                ruleTypeOption: [{"value": 0, "label": "默认"}, {"value": 1, "label": "其它"}],
                isValidOption: [{"value": 0, "label": "禁用"}, {"value": 1, "label": "启用"}],
                applicableConditionsOption: [{"value": 0, "label": "无"}, {"value": 1, "label": "账户无欠费"}],
                title: '添加规则',
                searchName: '',
                searchIsValid: '',
                queryCondition,
                queryBindCondition,
                id: '',
                ruleName: '',
                ruleType: 0,
                applicableConditions: 1,
                rechargePrice: 0,
                rechargeGiftPrice: 0,
                rechargeParValueUnit: '',
                isValid: 0,
                startTime: '',
                endTime: '',
                expandedKeys: [],
                selectedKeys: [],
                /* 弹窗 */
                dispatchPopupData: {
                    visible: false,
                    loading: false
                },

                /* 绑定用户组弹窗 */
                bindUserGroupPopupData: {
                    visible: false,
                    loading: false
                },
                activityRuleId: '',
                userGroupList: [],
                selectUserGroupId: [],
                activitiesName: this.activitiesName,
                activitiesId: '',
            };
        },

        methods: {
            /**组件部分相关方法**/
            tableChange(page) {
                this.queryCondition.curr = page.current;
                this.queryData();
                this.queryCondition.curr = 0;
            },
            customRow(record) {
                return {
                    on: { // 事件
                        // click: () => {
                        //     this.deleteName=record.name;
                        //     this.deleteId=record.id;
                        // },
                        // 双击点击行
                        dblclick: () => {
                            this.updateMarketing(record);
                        }
                    },
                }
            },
            setRowClassName(record) {
                return record.id === this.tableState.rowId ? 'clickRowStyl' : '';
            },

            /**按钮以及日期控件**/
            button_time(e) {
                this.selectId = e;
                let momentStart;
                let momentEnd;
                switch (e) {
                    case 0:
                        momentStart = moment().startOf('day');
                        momentEnd = moment().endOf('day');
                        break;
                    case 1:
                        momentStart = moment().add('day', -1).startOf('day');
                        momentEnd = moment().add('day', -1).endOf('day');
                        break;
                    case 2:
                        momentStart = moment().week(moment().week()).startOf('week');
                        momentEnd = moment().week(moment().week()).endOf('week');
                        break;

                    case 3:
                        momentStart = moment().week(moment().week() - 1).startOf('week');
                        momentEnd = moment().week(moment().week() - 1).endOf('week');
                        break;
                    case 4:
                        momentStart = moment().month(moment().month()).startOf('month');
                        momentEnd = moment().month(moment().month()).endOf('month');
                        break;
                    default :
                        break;
                }
                this.momentArr[0] = momentStart;
                this.momentArr[1] = momentEnd;
                this.queryData();
            },

            clearSelect() {
                this.currRowData = "";
                this.tableState.rowId = "";
            },

            /* ---------------------- 条件筛选 ---------------------- */
            onChange(dates) {
                this.momentArr = dates;
            },
            onOk(value) {
                this.momentArr = value;

                this.queryData();
            },
            onChangePop(dates) {
                this.momentArrPop = dates;
            },
            onOkPop(value) {
                this.momentArrPop = value;
                if (this.momentArrPop != undefined && this.momentArrPop.length != 0) {
                    this.startTime = this.setTime(this.momentArrPop[0]);
                    this.endTime = this.setTime(this.momentArrPop[1]);
                }
            },

            rangePickerValue() {
                return this.momentArr;
            },
            rangePickerValuePop() {
                return this.momentArrPop;
            },
            setTime(fmt) {
                const time = new Date(fmt);
                const Y = time.getFullYear()
                const M = (time.getMonth() + 1).toString().padStart(2, '0')
                const D = time.getDate().toString().padStart(2, '0')
                const h = time.getHours().toString().padStart(2, '0')
                const m = time.getMinutes().toString().padStart(2, '0')
                const s = time.getSeconds().toString().padStart(2, '0')
                return `${Y}-${M}-${D} ${h}:${m}:${s}`
            },

            selectIsValidType(value) {
                this.searchIsValid = value;
                this.queryData()
            },
            /*selectIsValidTypeChange(value) {
              if (value == undefined || value == '') {
                this.searchIsValid = '';
                this.queryCondition.curr = 1;
                this.queryData();
              }
            },*/
            /** 操作相关(crud) **/
            queryData() {
                let condition = this.getQueryCondition();
                apiMarkeingRule.getRuleList(condition)
                    .then((data) => {
                        let {list, total, pageNum, pageSize} = data.data
                        let array = list || [];
                        array = array.map((item, index) => {
                            return {...item, no: total - (pageNum - 1) * pageSize - index}
                        })
                        this.dataSource = array;
                        this.pagination.total = total;
                        this.pagination.current = pageNum;
                    }).catch(err => {
                    console.log("获取列表异常！", err);
                });
            },
            addTap() {
                this.dispatchPopupData.visible = true;
                this.dispatchPopupData.loading = false;
                this.title = "添加活动规则";
                this.id = ''
                this.activitiesName = this.activitiesName;
                this.activitiesId = this.activitiesId;
                this.ruleName = '';
                this.applicableConditions = 1;
                this.rechargeGiftPrice = 0;
                this.rechargePrice = 0;
                this.rechargeParValueUnit = null;
                this.ruleType = 0;
                this.isValid = 1;
                this.startTime = '';
                this.endTime = '';
                this.momentArrPop[0] = '';
                this.momentArrPop[1] = '';
            },
            updateMarketing(record) {
                this.title = "修改活动规则";
                this.id = record.id;
                this.activitiesName = record.activitiesName;
                this.activitiesId = record.activitiesId;
                this.ruleName = record.ruleName;
                this.applicableConditions = record.applicableConditions;
                let rgp = isNaN(parseInt(record.rechargeGiftPrice)) ? 0 : parseInt(record.rechargeGiftPrice) / 100;
                let rp = isNaN(parseInt(record.rechargePrice)) ? 0 : parseInt(record.rechargePrice) / 100;
                this.rechargeGiftPrice = rgp;
                this.rechargePrice = rp;
                this.rechargeParValueUnit = record.rechargeParValueUnit;
                this.isValid = record.isValid;
                this.startTime = record.startTime;
                this.endTime = record.endTime;
                this.momentArrPop[0] = record.startTime;
                this.momentArrPop[1] = record.endTime;
                this.dispatchPopupData.visible = true;
                this.dispatchPopupData.loading = false;
            },

            getQueryCondition() {
                let condition = this.queryCondition;
                let startTimeStamp = "";
                let endTimeStamp = "";
                condition.ruleName = this.searchName;
                condition.isValid = this.searchIsValid;
                if (this.momentArr != undefined && this.momentArr.length != 0) {
                    condition.timeScreenCondition = "6";
                    startTimeStamp = new Date(this.momentArr[0]).getTime() / 1000;
                    endTimeStamp = new Date(this.momentArr[1]).getTime() / 1000;
                } else {
                    condition.timeScreenCondition = "0";
                }
                condition.startTimeStamp = startTimeStamp;
                condition.endTimeStamp = endTimeStamp;
                return condition;
            },
            hideDispatchPopup() {
                this.dispatchPopupData.visible = false;
                this.id = ''
                this.ruleName = '';
                this.applicableConditions = 0;
                this.rechargePrice = 0;
                this.rechargeGiftPrice = 0;
                this.rechargeParValueUnit = '';
                this.ruleType = 0;
                this.isValid = 1;
            },

            //隐藏绑定用户组弹窗
            hideBindUserGroupPopup() {
                this.bindUserGroupPopupData.visible = false;
                this.activityRuleId = '';
                this.selectUserGroupId = [];
            },

            bindActivityToUserGroup() {
                let condition = this.queryBindCondition;
                condition.activityRuleId = this.activityRuleId;
                condition.adminUserGroupIdArr = this.selectUserGroupId;
                this.bindUserGroupPopupData.loading = true;
                userGroupApi.bindActivityToUserGroup(condition).then((data) => {
                    if (data.code === 2000) {
                        this.$message.success("操作成功");
                        this.hideBindUserGroupPopup();
                    }
                    this.bindUserGroupPopupData.visible = false;
                }).catch((err) => {
                    console.log("失败：" + err);
                    this.$message.warn('操作失败');
                    this.bindUserGroupPopupData.visible = false;
                });
            },

            addOrUpdateActivities() {
                let condition = {};
                //名称
                let activitiesId = this.activitiesId;
                let ruleName = this.ruleName;
                let applicableConditions = this.applicableConditions;
                let rechargePrice = this.rechargePrice * 100;
                let rechargeGiftPrice = this.rechargeGiftPrice * 100;
                let rechargeParValueUnit = this.rechargeParValueUnit;
                let ruleType = this.ruleType;
                let isValid = this.isValid;
                let startTime = this.startTime;
                let endTime = this.endTime;
                // let parkId=this.selectParkIds;
                if (activitiesId == '' || activitiesId == undefined) {
                    return this.$message.warn('活动不能为空!');
                }
                if (ruleName == '' || ruleName == undefined) {
                    return this.$message.warn('规则名称不能为空!');
                }
                if (applicableConditions == '' || applicableConditions == undefined) {
                    return this.$message.warn('规则适用条件不能为空!');
                }
                if (rechargePrice == '' || rechargePrice == undefined) {
                    return this.$message.warn('充值满足条件不能为空!');
                }
                if (rechargePrice < 0) {
                    return this.$message.warn('充值满足条件不能小于0!');
                }
                if (rechargeGiftPrice == '' || rechargeGiftPrice == undefined) {
                    return this.$message.warn('充值满足条件赠送不能为空!');
                }
                if (rechargeGiftPrice < 0) {
                    return this.$message.warn('充值满足条件赠送不能小于0!');
                }
                if (rechargeParValueUnit == '' || rechargeParValueUnit == undefined) {
                    return this.$message.warn('面值单位不能为空!');
                }
                if (startTime == '' || startTime == undefined) {
                    return this.$message.warn('活动有效时间开始不能为空!');
                }
                if (endTime == '' || endTime == undefined) {
                    return this.$message.warn('活动有效时间结束不能为空!');
                }
                condition.id = this.id;
                condition.activitiesId = activitiesId;
                condition.ruleName = ruleName;
                condition.ruleType = ruleType;
                condition.applicableConditions = applicableConditions;
                condition.rechargePrice = rechargePrice;
                condition.rechargeGiftPrice = rechargeGiftPrice;
                condition.rechargeParValueUnit = rechargeParValueUnit;
                condition.isValid = isValid;
                condition.startTime = startTime;
                condition.endTime = endTime;
                this.dispatchPopupData.loading = true;
                apiMarkeingRule.addOrUpdateActivitiesRule(condition).then((data) => {
                    if (data.code === 2000) {
                        this.$message.success("操作成功");
                        this.queryData();
                        this.hideDispatchPopup();
                    }
                    this.dispatchPopupData.visible = false;
                }).catch((err) => {
                    console.log("失：" + err)
                    this.$message.warn('操作失败');
                    this.dispatchPopupData.visible = false;
                });
            },
            rollbackClick() {
                // 返回上一层
                this.$router.push('/marketing/getList');
            },
            deleteOk(id) {
                let con = {};
                con.id = id;
                apiMarkeingRule.deleteActivitiesRule(con).then(res => {
                    if (res.code === 2000) {
                        this.$message.success("删除成功");
                        this.queryData();
                    }
                }).catch(err => {
                    console.log(err);
                    this.$message.warn('删除失败');
                })
            },
            clickBindButton(id) {
                //显示用户组弹窗
                this.bindUserGroupPopupData.visible = true;
                this.bindUserGroupPopupData.loading = false;
                this.title = "绑定用户组";
                this.activityRuleId = id;
                //查询用户组列表
                userGroupApi.listUserGroupAll()
                    .then((data) => {
                        this.userGroupList = data.data;
                    })
                    .catch(() => {
                        this.$message.error("获取用户组列表数据异常！");
                    });
            },
        },

        computed: {
            computedStyle() {
                return function (selectId) {
                    return this.selectId == selectId ? "" : "";
                }
            },
            computedDue() {
                let dataSource = this.dataSource || [];
                let result = 0;
                dataSource.forEach(item => {
                    result += isNaN(parseInt(item.rechargePrice)) ? 0 : parseInt(item.rechargePrice);
                })
                return result / 100;
            },
        },

        /*页面初始化渲染后执行*/
        mounted() {
            this.activitiesName = this.$route.query.activitiesName;
            this.activitiesId = this.$route.query.id;
            let condition = this.getQueryCondition();
            condition.activitiesId = this.$route.query.id;
            this.button_time(0)
        }
    }
</script>

<style scoped>
    .ant-table td {
        white-space: nowrap;
    }

    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        height: 174px;
        background: #fff;
    }

    .header-setting .breadcrumb {
        margin-left: 41px;
        padding-top: 15px;
    }

    /*表格行选中背景颜色*/
    .clickRowStyl {
        background-color: #C1E0FD;
    }

    .box-condition-body {
        padding-left: 40px;
        padding-right: 40px;
        background: #fff;
    }

    .box-condition-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .button_time {
        margin-left: 100px;
        display: flex;
    }

    .button_time button {
        margin-right: 10px;
    }

    /* 表单 */
    .box-form {
        padding-left: 40px;
        padding-right: 40px;
        min-height: 705px;
        background: #fff;
        margin-top: 8px;
    }

    .box-form .box-tool {
        padding-top: 11px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .box-form .box-table {
        margin-top: 12px;
    }

    .box-tool button {
        margin: 0 0 0 10px;
    }

    /*轮播*/
    .modalBox {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .modalBox .playImg {
        position: relative;
        width: 60%
    }

    .modalBox .fromBox {
        width: 35%
    }

    .modalBox .fromBox input {
        margin-bottom: 15px;
    }

    .modalBox .playImg ul.imgList {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
    }

    .modalBox .playImg .img {
        width: 100%;
        height: 200px;
    }

    .modalBox .playImg .img img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .modalBox .playImg .pointBox {
        position: absolute;
        bottom: 10px;
        width: 100%;
    }

    .modalBox .playImg .pointBox ul {
        display: flex;
        justify-content: center;
    }

    .modalBox .playImg .pointBox li.point {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 50%;
        margin: 0 10px;
        background: #000;
    }

    .modalBox .playImg .pointBox li.active {
        background: #ff7255;
    }

    .array {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        opacity: 1;
        position: absolute;
        font-size: 30px;
    }

    .array .left, .array .right {
        color: #fafafa;
        cursor: pointer
    }

    /*.array .right{color:#999;cursor:pointer}*/
    .array .left:hover {
        color: #333;
    }

    .array .right:hover {
        color: #333;
    }

    /* box-correction-popup */
    .box-correction-popup {
        padding: 20px;
        height: 555px;
        /* flex */
        display: flex;
        align-items: center;
    }

    .box-correction-popup .box-image {
        padding: 0 15px;
        width: 888px;
        height: 500px;
    }

    .box-correction-popup .box-image .icon-image {
        width: 100%;
        height: 100%;
    }

    .box-correction-popup .box-correct {
        margin: 0 15px;
        width: 310px;
        height: 500px;
    }

    .box-correction-popup .box-correct .item-correct {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .box-correction-popup .box-correct .item-correct .text-correct {
        font-weight: 300;
        font-size: 14px;
        width: 100px;
    }

    .box-correction-popup .box-correct .item-correct .text-value {
        font-weight: 300;
        font-size: 14px;
        line-height: 1.428571429;
        color: #020202;
    }

    /* box-dispatch-item */
    .box-dispatch-item {
        display: flex;
        align-items: center;
    }

    .box-dispatch-item .text-key {
        width: 200px;
        /* text */
        font-size: 14px;
        font-weight: 300;
        color: #797979;
    }

    .box-dispatch-item .text-value {
        width: 265px;
    }
</style>
